<template>
  <div ref="chartRef" class="echarts-box"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ChartBig",
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chartRef);
    let option = {
      color: [
        "red",
        "green",
        "black",
        "yellow",
        "gray",
        "pink",
        "brown",
        "silver",
        "gold",
        "greenyellow",
        "khaki",
        "chocolate",
        "cyan",
        "maroon",
        "blue",
        "navy",
        "coral",
        "darkviolet",
        "bisque",
        "salmon",
        "tan",
        "snow",
      ],
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(50,50,50,0.7)",
        borderColor: "rgba(50,50,50,0.7)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        right: "42%",
        bottom: "20",
        formatter: function (name) {
          if (!name) return "";
          if (name.length > 6) {
            name = name.slice(0, 6) + "...";
          }
          return name;
        },
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["58%", "76%"],
          center: ["35%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: this.data.map((item) => item),
          //  data: [
          //    { value: 1048, name: "小杨" },
          //    { value: 735, name: "侯立伟" },
          //    { value: 580, name: "库里" },
          //    { value: 484, name: "欧文" },
          //    { value: 300, name: "张阿狗" },

          //    { value: 484, name: "21" },
          //    { value: 300, name: "34" },
          //    { value: 484, name: "3" },
          //    { value: 300, name: "5" },
          //    { value: 484, name: "6757556" },
          //    { value: 300, name: "32131313" },
          //    { value: 484, name: "123132131" },
          //    { value: 300, name: "321321313" },
          //    { value: 484, name: "32113" },
          //    { value: 300, name: "332134" },
          //    { value: 484, name: "33213213214" },
          //    { value: 300, name: "786865" },
          //    { value: 484, name: "67587687556" },
          //    { value: 300, name: "32137871313" },
          //    { value: 484, name: "123138782131" },
          //    { value: 300, name: "3213287871313" },
          //  ],
        },
      ],
    };
    this.myChart.setOption(option);
  },
  watch: {
    data: {
      handler() {
        this.myChart.setOption({
          series: [
            {
              data: this.data.map((item) => item),
            },
          ],
        });
      },
    },
  },
};
</script>

<style lang="less" scpoed>
.echarts-box {
  width: 100%;
  height: 480px;
}
</style>
